<template>
  <div class="mod-out-home" v-loading="loading">
    <pageHeader></pageHeader>
    <div class="max_screen_body">
      <div class="max_screen_body_left">
        <div class="screen_card screen_card1">
          <card-header :title="'基本信息'" :path="'screen/card_header.png'"></card-header>
          <div class="setHeight">
            <div class="screen_card_body" v-if="screenData">
              <div class="base_min_box" v-for="(item, index) in base_arr" :key="index + '_key1'">
                <img :src="getAssetsFile(`screen/home_${index}.png`)" alt=""/>
                <div class="base_text">
                  <p class="base_text_title">
                    {{ item.name }}
                  </p>
                  <p class="base_text_desc">
                    {{ screenData[item.key] }} <span>{{ item.unit }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_card screen_card2">
          <card-header :title="'塍里要闻'" :path="'screen/card_header.png'"></card-header>
          <div class="screen_card_body">
            <div class="screen_news_item" v-for="(item, index) in dataArr['CLnews']" :key="item.id" @click="show(item.id)">
              <img v-if="index == 0" style="width: 1.1vw; height: 2.1vh" src="@/assets/images/screen/hot_news_icon.png" alt=""/>
              <img v-if="index != 0" src="@/assets/images/screen/news_icon.png" alt=""/>
              <div :style="index == 0 ? ('color:#F56C6C') : ('color:#ffffff') ">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="max_screen_body_center">
        <div class="screen_card_center">
          <card-header :title="'乡村宣传'" :path="'screen/card_header2.png'"></card-header>
          <div class="screen_video_box">
            <Videos v-if="screenData" :video-url="'https://' + screenData.villagePublicize" :autoplay="true"
                    :loop="true" :video-cover="'https://' + screenData.villagePublicizeCover" zoom="fill"/>
          </div>
        </div>
        <div class="screen_card_center">
          <card-header :title="'知塍晓政'" :path="'screen/card_header2.png'"></card-header>
          <div class="screen_card_imgBox">
            <div class="screen_card_imgBox_item" v-for="(item, index) in party_arr" :key="index + '_key2'">
              <div class="imgBox_item_title">
                <img src="@/assets/images/screen/img_title.png" alt=""/>
                <div class="imgBox_item_tit">{{ item.name }}</div>
              </div>
              <div class="imgBox_item_imgBox_out">
                <div class="imgBox_item_imgBox_inner">
                  <el-carousel indicator-position="none" arrow="never" :interval="5000+((index+1)*1000)">
                    <el-carousel-item v-for="(ite,ind) in dataArr[item.key]" :key="ite.id">
                      <el-image style="width: 100%; height: 100%;" :src="'https://' + ite.image"
                                :preview-src-list="[...dataArr[item.key].map((it:any)=>'https://' + it.image)]"
                                preview-teleported
                                :initial-index="ind"
                                fit="cover"></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="max_screen_body_right">
        <div class="screen_card">
          <card-header :title="'一塍千延'" :path="'screen/card_header.png'"></card-header>
          <div class="screen_card_body screen_card3">
            <div class="screen_right_news_item" v-for="(item, index) in dataArr['chengliStyle']" :key="item.id">
              <div class="right_news_img">
                <el-image
                  :src="'https://' + item.image"
                  :preview-src-list="['https://' + item.image]">
                </el-image>
              </div>
              <div class="right_news_word" @click="show(item.id)">
                <div class="right_news_title">
                  {{ item.title }}
                </div>
                <div class="right_news_desc">
                  {{ item.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'当月积分排名'" :path="'screen/card_header.png'"></card-header>
          <div class="screen_card_body screen_card4">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane v-for="(item, index) in userScore" :key="'pane' + index" :label="item" :name="item">
                <div class="right_box_padding">
                  <div class="right_box_item" v-for="(item, index) in 10" :key="index + '_key4'">
                    <div class="right_box_item_img">
                      <img :src="getAssetsFile(`screen/point_${index > 3 ? 3 : index}.png`)" alt=""/>
                      <div class="right_box_item_num">{{ item }}</div>
                    </div>
                    <div class="right_box_item_text">
                      <div class="right_box_item_tit">3组31号</div>
                      <div class="right_box_item_desc">黄嘉旭</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <show-dialog ref="showDialogRef"></show-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import baseService from "@/service/baseService";
import type {TabsPaneContext} from "element-plus";
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import Videos from "./components/videos.vue";
import usePub from "@/utils/pub-use";
import img from "@/assets/images/screen/welcome.png";
import showDialog from "./components/show_dialog.vue";

const getAssetsFile = (path: any) => {
  return usePub(path);
};

const loading = ref(false);

let arr = ["CLnews", "chengliStyle"];
const dataArr = reactive({}) as any;
// for (let i = 0; i < arr.length; i++) {
//   dataArr[arr[i]] = i;
// }

const screenData = ref();

const showDialogRef = ref();

const getDataList = () => {
  baseService.get("/clc/clcbaseinfo/page", {limit: 1, page: 1, isDefault: 1, isPublish: 1}).then((res) => {
    if (res.data.list.length > 0) {
      screenData.value = res.data.list[0];
    }
  });
  for (let i = 0; i < party_arr.length; i++) {
    baseService.get("/bus/busnotice/page", {
      page: 1,
      limit: 100,
      type: party_arr[i].key,
      textType: 3,
      isPublish: 1
    }).then((res) => {
      dataArr[party_arr[i].key] = res.data.list;
    });
  }
  for (let i = 0; i < arr.length; i++) {
    baseService.get("/bus/busnotice/page", {
      page: 1,
      limit: 100,
      type: arr[i],
      textType: 0,
      isPublish: 1
    }).then((res) => {
      dataArr[arr[i]] = res.data.list;
    });
  }
};

const show = (id: any) => {
  // loading.value = true;
  baseService.get(`/bus/busnotice/${id}`).then((res) => {
    // loading.value = false;
    showDialogRef.value.acceptParams({text: res.data.textContent});
  });
};

onBeforeMount(() => {
  getDataList();
});

onMounted(() => {
  getSysInfo();
});

const base_arr = [
  {
    name: "总户数",
    key: "household",
    unit: "户"
  },
  {
    name: "自然村数量",
    key: "village",
    unit: "个"
  },
  {
    name: "户籍人口",
    key: "domicile",
    unit: "人"
  },
  {
    name: "常住人口",
    key: "permanent",
    unit: "人"
  },
  {
    name: "面积",
    key: "area",
    unit: "平方公里"
  }
];

const party_arr = [
  {
    key: "openPartyAffairs",
    name: "党务公开栏"
  },
  {
    key: "openGovernmentAffairs",
    name: "政务公开栏"
  },
  {
    key: "openFinance",
    name: "财务公开栏"
  },
  {
    key: "openWork",
    name: "事务公开栏"
  },
  {
    key: "openService",
    name: "服务公开栏"
  }
];

const userScore = ["塍里", "建西", "东瓦窑", "西瓦窑", "元帆", "赵庄"];

const activeName = ref(userScore[0]);
const selentIndex = ref(0);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  selentIndex.value = Number(tab.index);
  activeName.value = userScore[selentIndex.value];
};

const sysInfo = reactive({});

const getSysInfo = () => {
  // baseService.get("/sys/info").then((res) => {
  // });
};
</script>

<style lang="less">
.mod-out-home {
  background: #121f2e;
  width: 100%;
  height: 100%;
  user-select: none;

  p {
    margin: 0;
  }

  & div {
    box-sizing: border-box;
  }

  .max_screen_body {
    //margin-top: 2vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vh 0.8vw;

    .screen_card {
      .setHeight {
        width: 100%;
        height: 40.3vh;
        background: #112a38;
      }

      .screen_card_body {
        width: 100%;
        height: 40.3vh;
        background: #112a38;
        overflow: auto;
      }
    }

    .max_screen_body_left {
      margin-right: 0.6vw;
      display: flex;
      flex-direction: column;
      flex: 1;

      .screen_card1 {
        margin-bottom: 2.5vh;

        .screen_card_body {
          display: flex;
          flex-wrap: wrap;
          padding: 2vh 0 2vh 1.1vw;
        }

        .base_min_box {
          display: flex;
          align-items: center;
          min-width: 11.1vw;

          img {
            width: 4.9vw;
            height: 9.1vh;
          }

          .base_text {
            color: #ffffff;

            .base_text_title {
              font-weight: 400;
              font-size: 0.8vw;
              margin-bottom: 1.1vh;
            }

            .base_text_desc {
              font-weight: bold;
              font-size: 1.7vw;

              span {
                font-size: 0.6vw;
                font-weight: normal;
              }
            }
          }
        }
      }

      .screen_card2 {
        overflow: hidden;

        .screen_card_body {
          padding: 2vh 1.1vw;

          .screen_news_item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.9vh;

            img {
              width: 0.8vw;
              height: 1.8vh;
              margin-right: 0.8vw;
            }

            div {
              flex: 1;
              width: 0;
              font-size: 0.8vw;
              color: #ffffff;
              letter-spacing: 0.1vw;
              cursor: pointer;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .screen_news_item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .max_screen_body_center {
      margin: 0 0.6vw;
      flex: 2;
      display: flex;
      flex-direction: column;

      .screen_video_box {
        width: 100%;
        //height: 44.9vh;
        height: 40.3vh;
        background: #112a38;
        margin-bottom: 2.5vh;
      }

      .screen_card_imgBox {
        width: 100%;
        //height: 35.6vh;
        height: 40.3vh;
        background: #112a38;
        padding: 4vh 0.8vw;
        display: flex;
        justify-content: space-between;

        .screen_card_imgBox_item {
          flex: 1;
          margin-right: 0.5vw;

          .imgBox_item_title {
            position: relative;
            text-align: center;
            margin-bottom: 2vh;

            img {
              width: 7.6vw;
              height: 2.8vh;
            }

            .imgBox_item_tit {
              position: absolute;
              left: 50%;
              width: 100%;
              transform: translateX(-50%);
              color: #ffffff;
              font-size: 0.7vw;
              top: 0.6vh;
            }
          }

          .imgBox_item_imgBox_out {
            height: 27vh;
            width: 100%;
            border: 0.1vw solid #ebd091;
            padding: 0.3vh 0.2vw;

            .imgBox_item_imgBox_inner {
              border: 0.1vw solid #1b99df;
              width: 100%;
              height: 100%;
            }
          }
        }

        .screen_card_imgBox_item:last-child {
          margin-right: 0;
        }
      }
    }

    .max_screen_body_right {
      margin-left: 0.6vw;
      flex: 1;

      .screen_card3 {
        margin-bottom: 2.5vh;
        padding: 2.2vh 0.8vw;

        .screen_right_news_item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 2.9vh;
          cursor: pointer;

          .right_news_img {
            width: 5vw;
            height: 6.7vh;
            border: 0.1vw solid #1aa6f2;
            margin-right: 0.8vw;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .right_news_word {
            flex: 1;
            width: 0;
            color: #e4f2ff;

            .right_news_title {
              font-size: 0.8vw;
              margin-bottom: 1.3vh;
            }

            .right_news_desc {
              font-size: 0.6vw;
              opacity: 0.8;
              line-height: 1.5;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; /* 这里是超出几行省略 */
              overflow: hidden;
            }
          }
        }

        .screen_right_news_item:last-child {
          margin-bottom: 0;
        }
      }

      .screen_card4 {
        overflow: auto;

        .el-tabs {
          height: 100%;
        }

        .el-tabs__header {
          margin-bottom: 1.56vh;
        }

        .el-tabs__content {
          height: calc(100% - 5.72vh);

          .el-tab-pane {
            height: 100%;
          }
        }

        .el-tabs__nav {
          display: flex;
          width: calc(100% - 4px);

          .el-tabs__active-bar {
            background: transparent;
          }

          .el-tabs__item {
            flex: 1;
            padding: 0 1%;
            text-align: center;
            color: #ffffff;
            font-size: 0.73vw;
            height: 4.16vh;
            line-height: 4.16vh;
          }

          .is-active.el-tabs__item {
            color: #ffffff;
            position: relative;
            background: linear-gradient(180deg, rgba(0, 218, 212, 0.1) 0%, rgba(0, 218, 212, 1) 280%);
          }

          .is-active.el-tabs__item::after {
            right: 10%;
            left: auto;
          }
        }

        .el-tabs__nav-wrap::after {
          background: #3e506f !important;
        }

        .right_box_padding {
          padding: 2vh 0 2vh 1.1vw;
          display: flex;
          flex-wrap: wrap;

          .right_box_item {
            display: flex;
            align-items: center;
            margin-bottom: 2.9vh;
            width: 50%;

            .right_box_item_img {
              width: 2.8vw;
              height: 3.8vh;
              position: relative;
              margin-right: 0.6vw;

              img {
                width: 100%;
                height: 100%;
              }

              .right_box_item_num {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-49%) translateY(-65%);
                color: #ffffff;
                font-weight: bold;
                font-size: 1vw;
              }
            }

            .right_box_item_text {
              .right_box_item_tit {
                font-size: 0.8vw;
                color: #ffffff;
                letter-spacing: 0.1vw;
                margin-bottom: 0.5vh;
              }

              .right_box_item_desc {
                font-size: 0.6vw;
                color: #ffffff;
                letter-spacing: 0.2vw;
                opacity: 0.6;
              }
            }
          }

          .right_box_item:nth-last-of-type(-n + 2) {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .el-carousel {
    height: 100%;

    .el-carousel__container {
      height: 100% !important;
    }
  }
}
</style>
